<template>
	<view>
		<view class="orderTop">
			<view class="topLeft">
				{{tipArr[orderState]}}
			</view>
			<view class="topRight">
				<view class="odrersBtn">
					<view class="odrersBtn1">
						<u-button  color="#62d8d6" throttleTime='1000' :text="btnList[orderState][0]"
							:open-type="openFuntion" @click="toOrderDetail(orderState)"></u-button>
					</view>
					<view class="odrersBtn2">
						<u-button  color="#62d8d6" throttleTime='1000' :text="btnList[orderState][1]"
							@click="cancelOrder(orderState)"></u-button>
					</view>
				</view>
			</view>
		</view>


		<!-- 此订单的活动详情 -->
		<view class="classBox" style="line-height: 25px;">
			<view class="classLeft">
				<image :src="classSList.classImg" class="classImg"></image>
			</view>
			<view class="classRight">
				<view class="className" style="line-height: 20px;">
					<text class="u-line-3">{{classSList.className }}</text>
				</view>
				<vie class="classDate">{{startDate}}至{{endDate}}</vie>
			</view>
		</view>


		<view class="userInfoMsg">

			<view>
				<uni-table>
					<uni-tr>
						<uni-td>总人数</uni-td>
						<uni-td>{{orderUserInfoList.length}}人</uni-td>
					</uni-tr>
					<uni-tr>

					</uni-tr>
				</uni-table>
			</view>
			<view style="margin-top: 20rpx;">

				<uni-table v-for="(item,index) in orderUserInfoList" :key="index">
					<uni-tr>
						<uni-td>用户{{index+1}}:</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td>姓名</uni-td>
						<uni-td>{{item.name}}</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td>身份证号</uni-td>
						<uni-td>{{item.idNumber}}</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td>手机号</uni-td>
						<uni-td>{{item.phoneNumber}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<view class="orderUserDetail">
			<uni-table>
				<uni-tr>
					<uni-td>订单信息：</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>订单编号</uni-td>
					<uni-td>{{orderMsg.number}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>下单时间</uni-td>
					<uni-td>{{orderMsg.orderTime}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>联系电话</uni-td>
					<uni-td>{{orderMsg.phone}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>支付金额</uni-td>
					<uni-td><text>￥{{orderMsg.amount}}</text></uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>优惠金额</uni-td>
					<uni-td><text>￥{{orderMsg.preferentialAmount}}</text></uni-td>
				</uni-tr>
			</uni-table>

		</view>
		<view class="showSpend">
			<uni-table>
				<uni-tr>
					<uni-td> </uni-td>
					<uni-td> </uni-td>
					<uni-td> </uni-td>
					<uni-td>共<text class="peopleAmount">{{orderUserInfoList.length}}</text>人，总金额<text class="moneyAmount">￥{{orderMsg.amount}}</text></uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td></uni-td>
				</uni-tr>
				
			</uni-table>
		</view>






		<!-- 退款弹窗 -->
		<view>
			<u-popup :show="show" mode="center" @close="close" round="20" customStyle="width:450rpx; height:350rpx">
				<view class="bottomPay">
					<view>我想您一定是深思熟虑</view>
					<view>我们还需再改进</view>
					<view class="example-body">
						<uni-combox :candidates="candidates" placeholder="请选择取消/退款原因" v-model="reason"></uni-combox>
					</view>
					<view @click="returnPay" class="returnPay">
						<text>确认</text>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="popup" v-show="canclePopup">
			<u-loading-icon></u-loading-icon>
			<view>取消订单中...</view>
		</view>

	</view>
</template>

<script>
	export default {
		//接收传递过来的订单id
		onLoad: function(obj) {
			this.orderId = obj.orderId
			this.orderState = obj.currentOrderType
			this.getOrderDetail()
		},
		data() {
			return {
				orderId: -1,
				orderState: -1,
				classSList: {
					className: '',
					classImg: '',
					activityId:null
				},
				btnList: [
					['去付款', '取消订单'],
					['联系客服', '申请退款'],
					['联系客服', '申请退款'],
					['去评价', '申请退款'],
					['联系客服', '已退款'],
					['重新下单', '已取消'],
				],
				orderMsg: null,
				orderUserInfoList: [],
				tipArr: ["订单支付中", "订单进行中", "订单已完成", "占位文字", "订单已退款"],
				candidates: ['不想要了', '想重新下单', '地点有变', '不想去了', '时间冲突了', '选错了'],
				show: false,
				reason: '',
				canclePopup: false,
				refreshFlag: false ,//刷新标记
				openFuntion:''
			}
		},
		computed: {
			startDate() {
				if (this.orderMsg !== null) {
					return this.orderMsg.startDate.split(' ')[0]
				}
			},
			endDate() {
				if (this.orderMsg !== null) {
					return this.orderMsg.endDate.split(' ')[0]
				}
			}

		},
		methods: {
			close() {
				this.show = false
			},

			async returnPay() {
				//退款逻辑
				if (this.reason !== '') {
					this.canclePopup = true
					const res = await uni.$u.http.post("/user/order/userCancel", {
						cancelReason: this.reason,
						id: this.orderId
					}, {
						custom: {
							auth: true
						}
					}).then(result => {
						if (result.data.code === 1) {
							this.refreshFlag = !this.refreshFlag
							this.canclePopup = false
							this.show = false
							uni.showToast({
								title: '取消/退款成功',
								icon: 'success',
								duration: 1000
							})
							uni.switchTab({
								url: '/pages/my/my'
							})
						}
					})
				} else {
					this.show = false
					return uni.showToast({
						title: '请选择退款原因',
						icon: 'error'
					})
				}
			},
			toOrderDetail(orderState) {
				//根据状态来判断执行哪些函数
				if (orderState == 1 || orderState == 2 || orderState == 4) {
					//联系客服
					this.openFuntion="contact"
				} else if(orderState == 5 ){
					this.openFuntion=''
					uni.navigateTo({
						url: '/subpkg/detailLine/detailLine?activityId=' + this.classSList.activityId
					})
				}else if(orderState == 3){
					this.openFuntion=''
					uni.navigateTo({
						url:'/subpkg/orderComment/orderComment?orderId='+ this.orderId+ '&activityId=' + this.classSList.activityId
					})
				}
			},
			cancelOrder(orderState) {
				if (orderState == 1 || orderState == 2) {
					//申请退款
					this.show = true
				}
				if (orderState == 4 || orderState == 5) {
					uni.showToast({
						icon: 'error',
						title: '请勿点击'
					})
				}
			},
			async getActivity(activityId) {
				const res = await uni.$u.http.get("/user/activity/getActivityDetail/" + activityId, {
					custom: {
						auth: true
					}
				})
				this.classSList.className = res.data.data.activityName
				this.classSList.classImg = res.data.data.activityImagePath[0].imgSrc
			},
			async getOrderDetail() {
				if (this.orderId !== -1) {
					uni.$u.http.get('/user/order/orderDetail/' + this.orderId, {
						custom: {
							auth: true
						}
					}).then(res => {
						if (res.data.code == 1) {
							this.orderMsg = res.data.data
							let activityId = res.data.data.activityId
							this.orderUserInfoList = res.data.data.orderUserInfoList
							this.getActivity(activityId)
						} else {
							uni.showToast({
								icon: 'error',
								title: '请稍后再尝试',
								duration: 500
							})
							uni.navigateBack({
								delta: 1
							})
						}
					}).catch(err => {
						return uni.showToast({
								icon: 'error',
								title: '发生未知错误',
								duration: 500
							})
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.classBox {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
		width: 100%;
		background-color: ghostwhite;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

		.classLeft {
			flex: 1;
			width: 100px;
			height: 100px;
			padding: 10px;

			.classImg {
				width: 100%;
				height: 100%;
			}
		}

		.classRight {
			flex: 2;
			margin: 10px;
			font-size: 15px;
		}

		.classDate {
			font-size: 14px;
		}
	}

	.userInfoMsg {
		flex-direction: column;
		margin-top: 40rpx;
		display: flex;
		width: 100%;
		background-color: ghostwhite;
		box-shadow: 0 20rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.orderUserDetail {
		margin-top: 40rpx;
		display: flex;
		width: 100%;
		background-color: ghostwhite;
		box-shadow: 0 20rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.orderTop {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		background-color: ghostwhite;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

		.odrersBtn {
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-around;

			.odrersBtn1 {
				margin-bottom: 10rpx;
			}
		}
	}

	.returnPay {
		display: flex;
		flex-direction: column;
		width: 120rpx;
		height: 50rpx;
		border-radius: 20rpx;
		background-color: aqua;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}

	.bottomPay {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 70rpx;
	}
	.peopleAmount{
		font-weight: 600;
		font-size: 40rpx;
	}
	.moneyAmount{
		font-weight: 600;
		font-size: 40rpx;
		color:#058e73;
	}
</style>